<template>
    <view>
        <image class="back" src="../../static/images/png03.png"></image>
        <u-navbar
                :title="title"
                autoBack
                :bgColor="'rgba(255,255,255,0)'"
                leftIconColor="#fff"
                :titleStyle="{color:'#fff'}"
        >
        </u-navbar>
        <view class="main">
            <scroll-view
                    scroll-y
                    class="scrollView"
                    :style="{height:scrollViewHeight}"

                    @scrolltolower="scrolltolower"
                    refresher-enabled="true"
                    :refresher-triggered="triggered"
                    :refresher-threshold="60"
                    refresher-background="#f6f6f6"
                    @refresherpulling="onPulling"
                    @refresherrefresh="onRefresh"
            >
                <view class="list">
                    <view class="li" v-for="(item,index) in list" :key="index" @click="$common.go(1,`/pages/user/myEvalDetail?id=${item.id}`)">
                        <view class="top">
                            <view class="fl">
                                <view class="h1" v-if="item.type == 1">外卖配送</view>
                                <view class="h1" v-if="item.type == 2">帮送</view>
                                <view class="h1" v-if="item.type == 3">帮取</view>
                                <view class="h1" v-if="item.type == 4">一对一</view>
                                <view class="h1" v-if="item.type == 5">帮我买</view>
                                <view class="h2">{{item.item_type}}</view>
                            </view>
                            <view class="fr">
                                <view class="h1" v-if="item.status == 'CANCEL'">
                                    待支付:
                                    <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
                                </view>
                                <view class="h1" v-if="item.status == 'PENDING' || item.status == 'GRABBED' || item.status == 'PICKUP' || item.status == 'DELIVERING'">进行中</view>
                                <view class="h2" v-if="item.status == 'DONE'">已完成</view>
                                <view class="h2" v-if="item.status == 'CANCEL'">已取消</view>
                            </view>
                        </view>
                        <view class="ctn">
                            <view class="ol song">
                                <view class="h1">{{item.sender_address}}</view>
                                <view class="h2">
                                    {{item.sender}}
                                    <text>{{item.sender_phone}}</text>
                                </view>
                            </view>
                            <view class="ol shou">
                                <view class="h1">{{item.receiver_address}}</view>
                                <view class="h2">
                                    {{item.receiver}}
                                    <text>{{item.receiver_phone}}</text>
                                </view>
                            </view>
                        </view>
                        <!--<view class="btm">
                            <view class="fl">{{item.created_at}}</view>
                            <view class="fr">
                                <text v-if="item.status == 'CANCEL'">取消订单</text>
                                <text v-if="item.status == 'DONE'">争议纠纷</text>
                                <text class="full" v-if="item.status == 'PENDING' || item.status == 'GRABBED' || item.status == 'PICKUP' || item.status == 'DELIVERING'">联系骑手</text>
                                <text class="full" v-if="item.status == 'DONE'" @click.stop="$common.go(1,`/pages/order/rate`)">评价</text>
                            </view>
                        </view>-->
                    </view>
                    <u-loadmore v-if="loading" :status="'loading'" />
                    <u-loadmore v-if="noMore" :status="'nomore'" />
                    <noData v-if="noData"></noData>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    /*import {
        consumerLists
    } from '../../api/api'*/
    export default {
        data() {
            return {
                statusBar:'',
                statusBarHeight:'',
                scrollViewHeight:'',
                page:1,
                status:'',
                list:[],
                listJia:[],
                token:'',
                triggered: false,
                title:'我的评价',

                totalPages:0,
                noMore:false,
                loading:false,
                noData:false,
            }
        },
        onLoad(options) {
            this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            let otherHieight = this.$common.rpxToPx(70,uni.getSystemInfoSync().screenWidth);
            this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - otherHieight - this.statusBarHeight + 'px';

            setTimeout(() => {
                this.triggered = false;
            }, 1000)
        },
        onShow(){
            this.token = uni.getStorageSync('token');
            this.page = 1;
            this.listJia = [];
            this.consumerListsFun();
        },
        methods: {
            statusClick(status){
                this.status = status;
                this.listJia = [];
                this.page = 1;
                this.consumerListsFun();
            },
            onPulling() {
                var that = this;
                if(!this.triggered){
                    //下拉加载，先让其变true再变false才能关闭
                    this.triggered = true;
                }
            },
            onRefresh() {
                this.page = 1;
                this.listJia = [];
                this.consumerListsFun();
            },
            scrolltolower(){
                if(this.page == this.totalPages) return this.noMore = true;
                this.loading = true;
                this.page ++;
                this.consumerListsFun();
            },
            consumerListsFun(){
                console.log(156);
                this.globalajax('order/comments', {}, 'GET',(res) => {
                    this.listJia = this.listJia.concat(res.data.data.list);
                    this.list = this.listJia;
                    console.log(this.list);

                    this.totalPages = Math.ceil(res.data.total / res.data.pagesize);
                    if(this.list.length == 0){
                        this.noData = true;
                    } else{
                        this.noData = false;
                    }
                    if(this.page == this.totalPages){
                        this.loading = false;
                    }

                    this.triggered = false;
                });
            }
        }
    }
</script>
<style>
    page{
        background: #f6f6f6;
    }
</style>
<style lang="scss" scoped>
    .back{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .main{
        z-index: 2;
        padding: 25rpx;
        .bigNav{
            display: flex;
            align-items: center;
            position: relative;
            z-index: 2;
            .li{
                font-size: 35rpx;
                color: #fff;
                margin-right: 20rpx;
                position: relative;
                height: 65rpx;
                &.active{
                    color: #fff;
                    font-weight: bold;
                    &:after{
                        content: '';
                        display: block;
                        width: 30rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        background: #fff;

                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
        .smallNav{
            margin-top: 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            color: #fff;
            position: relative;
            z-index: 2;
            .li{
                height: 55rpx;
                position: relative;
                &.active{
                    color: #fff;
                    font-weight: bold;
                    &:after{
                        content: '';
                        display: block;
                        width: 30rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        background: #fff;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
        .scrollView{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding-top: 25rpx;
            box-sizing: border-box;
            .list{
                padding: 25rpx;
                .li{
                    background: #fff;
                    border-radius: 24rpx;
                    margin-top: 30rpx;
                    padding: 20rpx 25rpx 25rpx 25rpx;
                    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
                    &:first-child{
                        margin-top: 0;
                    }
                    .top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding-bottom: 15rpx;
                        border-bottom: 1px solid #418AFF;
                        .fl{
                            display: flex;
                            align-items: center;
                            .h1{
                                font-size: 35rpx;
                                color: #418AFF;
                            }
                            .h2{
                                height: 30rpx;
                                padding: 0 10rpx;
                                border-radius: 8rpx;
                                font-size: 20rpx;
                                color: #fff;
                                line-height: 30rpx;
                                margin-left: 15rpx;
                                background: #418AFF;
                            }
                        }
                        .fr{
                            .h1{
                                font-size: 25rpx;
                                color: #418AFF;
                                display: flex;
                                align-items: center;
                                /deep/ .u-count-down{
                                    margin-left: 5rpx;
                                    text{
                                        font-size: 25rpx;
                                        color: #FF3C26;
                                    }
                                }
                            }
                        }
                    }
                    .ctn{
                        .ol{
                            padding: 25rpx 0 0 40rpx;
                            position: relative;
                            &:after{
                                content: '';
                                display: block;
                                width: 16rpx;
                                height: 16rpx;
                                background: #418AFF;
                                border-radius: 50%;
                                position: absolute;
                                left: 0;
                                top: 40rpx;
                            }
                            &.shou{
                                &:after{
                                    background: #FF3C26;
                                }
                            }
                            .h1{
                                font-size: 32rpx;
                                color: #333;
                            }
                            .h2{
                                font-size: 24rpx;
                                color: #666;
                                margin-top: 8rpx;
                                text{
                                    margin-left: 20rpx;
                                }
                            }
                        }
                    }
                    .btm{
                        padding-top: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .fl{
                            font-size: 24rpx;
                            color: #666;
                        }
                        .fr{
                            text{
                                box-sizing: border-box;
                                height: 50rpx;
                                padding: 0 20rpx;
                                border: 1px solid #999;
                                font-size: 24rpx;
                                line-height: 50rpx;
                                border-radius: 64rpx;
                                display: inline-block;
                                margin-left: 15rpx;
                                &.full{
                                    border:none;
                                    background: #418AFF;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .loginBtn{
        margin: 0 auto;
        margin-top: 50rpx;
        width: 200rpx;
        height: 70rpx;
        border-radius: 70rpx;
        line-height: 70rpx;
        background: #418AFF;
        text-align: center;
        font-size: 28rpx;
        color: #fff;
    }
</style>
